<template>
  <view id="position">
    <view>
      <map
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
        :circles="circles"
        v-if="covers.length > 0"
      ></map>
    </view>
    <view class="bottom-nav" v-if="isCode == false">
      <button type="primary" class="btn" @click="next">下一步</button>
    </view>
  </view>
</template>

<script>
import { getValueByCode } from "@/api/sampleCheck/index";
export default {
  data() {
    return {
      // 项目信息
      projectInfo: {},
      form: {
        name: "",
      },
      latitude: 29.57592,
      longitude: 106.730822,
      covers: [],
      circles: [],
      byCode: "",
      isCode: false,
      hintShow: false,
    };
  },
  onReady() {
    this.projectInfo = uni.getStorageSync("projectInfo");
    this.latitude = this.projectInfo.latitude;
    this.longitude = this.projectInfo.longitude;
    this.covers.push({
      latitude: this.latitude,
      longitude: this.longitude,
      width: 48,
      height: 48,
      iconPath: "../../static/img/location.png",
    });
    this.getValueByCodes();
  },
  methods: {
    getValueByCodes() {
      getValueByCode({ code: "isCheckProjectMapRange" }).then((res) => {
        if (res.code == 200) {
          this.byCode = res.data.value;
          this.initPosition();
        }
      });
    },

    initPosition() {
      uni.showLoading({
        mask: true,
        title: "获取定位中...",
      });
      uni.getLocation({
        type: "gcj02",
        success: (res) => {
          uni.hideLoading();
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          // setTimeout(()=>{
          this.covers.push({
            latitude: res.latitude,
            longitude: res.longitude,
            // latitude: 29.57592,
            // longitude: 106.730822,
            width: 48,
            height: 48,
            iconPath: "../../static/img/location.png",
          });
          // },1000)
          // 添加500米范围圆
          this.circles = [
            {
              latitude: res.latitude,
              longitude: res.longitude,
              color: "#00AAFF22", // 圆圈颜色
              fillColor: "#00AAFF22", // 填充颜色
              radius: 500, // 半径500米
              strokeWidth: 1, // 边框宽度
            },
          ];
          let point1 = new plus.maps.Point(res.longitude, res.latitude);
          if (this.projectInfo.locationVOList) {
            this.calculateDistance(0, point1);
          } else {
            let point2 = new plus.maps.Point(
              this.projectInfo.longitude,
              this.projectInfo.latitude
            );
            plus.maps.Map.calculateDistance(
              point1,
              point2,
              (e) => {
                console.log(e.distance, "单点");
                if (e.distance > 500) {
                  if (this.byCode == "1") {
                    this.isCode = true;
                  }
                  uni.showModal({
                    title: "当前定位距离项目位置超过500m，确认继续操作？",
                    success: function (res) {
                      if (res.confirm) {
                        console.log("距离" + e.distance);
                      } else {
                        uni.navigateBack();
                      }
                    },
                  });
                }
              },
              (error) => {}
            );
          }
        },
        fail: (error) => {
          uni.hideLoading();
          // uni.showToast({
          //   title: "获取定位失败",
          //   icon: "none",
          // });
          uni.showToast({
            title: error,
            icon: "none",
          });
        },
      });
    },
    next() {
      let sampleCheck = uni.getStorageSync("sampleCheck");
      // 保存定位，分类id
      sampleCheck.longitude = this.longitude;
      sampleCheck.latitude = this.latitude;
      uni.setStorageSync("sampleCheck", sampleCheck);
      uni.navigateTo({
        url: "/pages/sampleCheck/index",
      });
    },
    // 处理定位距离
    calculateDistance(num, point1) {
      if (num < this.projectInfo.locationVOList.length) {
        let point2 = new plus.maps.Point(
          this.projectInfo.locationVOList[num].longitude,
          this.projectInfo.locationVOList[num].latitude
        );
        plus.maps.Map.calculateDistance(
          point1,
          point2,
          (e) => {
            console.log(e.distance, "多点");
            if (e.distance > 500) {
              if (this.byCode == "1") {
                this.isCode = true;
              }
              if (num == this.projectInfo.locationVOList.length - 1) {
                uni.showModal({
                  title: "当前定位距离项目位置超过500m，确认继续操作？",
                  success: function (res) {
                    if (res.confirm) {
                      console.log("距离" + e.distance);
                    } else {
                      uni.navigateBack();
                    }
                  },
                });
              }
              this.calculateDistance(num + 1, point1);
            }
          },
          (error) => {}
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#position {
  map {
    width: 100vw;
    height: calc(100vh - 100px);
  }

  .list {
    padding: 10px;
    overflow-y: auto;
    height: calc(100vh - 334px);

    .content {
      padding: 0 20px 10px 20px;
    }
    /deep/ .uni-list-item__container {
      padding: 8px;
    }
    /deep/ .uni-list-item__content {
      justify-content: center;
    }
  }

  .bottom-nav {
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 50px;
    padding: 10px;
    position: fixed;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  }
  .hint {
    background: #414144;
    position: fixed;
    width: 380rpx;
    top: 50%;
    left: 50%;
    margin-left: -190rpx;
    margin-top: -25px;
    text-align: center;
    border-radius: 10rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    z-index: 10000 !important;
  }
}
</style>
